@layout("/common/_container.html",{js:["/assets/modular/system/mishandleTicket/mishandleTicket_detail.js"]}){
<link href="/assets/common/swiper/swiper.min.css" rel="stylesheet">
<script src="/assets/common/swiper/swiper.min.js"></script>
<style>
    .repair-img{
        width: 100%;
        margin: 5px;
        height: 100%;
        object-fit: cover;
        border-radius: 2px;
    }
    .swiper-slide{
        width: 108px;
        height: 80px;
    }
    #repairForm{
        padding: 0 20px 0 0;
    }
    #repairForm .layui-form-item{
        margin-bottom: 6px;
        margin-left: 30px;
    }
    #repairForm .layui-form-item .layui-form-label{
        padding: 2px 15px;
        text-align: left;
        width: 64px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(0,0,0,0.45);
    }
    #repairForm .layui-form-item .layui-form-mid{
        padding: 2px 0!important;

    }
    .font-fomat{
        font-size: 14px;color: rgba(0,0,0,0.65);
        margin-left: 12px;
    }
    .layui-col-xs6 {
        width: 55%;

    }
    .layui-col-xs5{
        width: 45%;
    }
    .swiper-container {
        height: 100%;
        width: calc(100% - 82px);
        box-sizing: border-box;
        vertical-align: middle;
        margin: 0;
    }
    .swiper-button-next {
        position: absolute;
        left: auto;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        vertical-align: middle;
        color: rgba(0,0,0,0.65);
        width: 36px;
        height: 46px;
        outline: none;
        margin:0;
    }
    .swiper-button-prev {
        position: absolute;
        left: auto;
        right: 36px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        vertical-align: middle;
        color: rgba(0,0,0,0.65);
        width: 36px;
        height: 46px;
        font-size: 12px;
        outline: none;
        margin:0;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after,
    .swiper-button-next1:after,
    .swiper-button-prev1:after {
        font-size: 12px;
    }
    .layui-timeline-item:before {
        content: '';
        position: absolute;
        left: 14px;
        top: 29px;
        width: 1px;
        height: calc(100% - 36px);
        background: rgba(54,87,255,0.45);
    }
    .layui-input-block {
        margin-left: 82px;
    }

    .layui-col-space20 {
        background-color: #F9F9F9;
        margin-right: -20px;
    }
    .layui-timeline-item:only-child:before{
        display: none;
    }
</style>
<form id="repairForm" lay-filter="dataForm" class="layui-form model-form">
    <input name="orderId" id="orderId"  type="hidden" value="${orderId}"/>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-xs6" style="background:white;padding-top: 30px;">
            <div style="position: absolute" id="seal"></div>
            <div class="grid-demo grid-demo-bg1">
                <form class="layui-form" action="">
                    <div class="layui-form-item">

                        <div class="layui-inline" >
                            <div style="border-right: 3px solid #3557ff;height: 14px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);"></div>
                            <label  class="layui-form-label" style="font-family: PingFangSC-Regular;font-size: 16px;color: rgba(0,0,0,0.65);"> 基本信息</label>

                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" >
                            <label class="layui-form-label">报事状态:</label>
                            <div class="layui-form-mid layui-word-aux" ><input name="typeName" id="typeName" style="border:none;color:#979292de"  value="${typeName}"/></div>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">报事人:</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux" id="contactName"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号:</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux" id="contactPhone"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">处理负责人:</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux" id="operatorName"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">报事时间:</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux" id="createTime"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">报事内容:</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux" id="describes" style="width: 200px;word-break: break-all;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">报事照片:</label>
                        <div class="layui-input-block">
                            <div class="wrapper">
                                <div class="swiper-container swiper1">
                                    <div class="swiper-wrapper" id="submitImages">
                                    </div>
                                </div>
                                <div id="b1" style="display: none">
                                    <div class="swiper-button-prev p1"></div>
                                    <div class="swiper-button-next n1"></div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" >无法处理:</label>
                        <div class="layui-input-block">
                            <!--<div class="font-fomat" id="endImages" style="margin-left: 27px;"></div>-->
                            <div class="wrapper">
                                <div class="swiper-container swiper2">
                                    <div class="swiper-wrapper" id="endImages">
                                    </div>
                                </div>
                                <div id="b2" style="display: none">
                                    <div class="swiper-button-prev p2"></div>
                                    <div class="swiper-button-next n2"></div>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" >处理照片:</label>
                        <div class="layui-input-block">
                            <!--<div class="font-fomat" id="endImages" style="margin-left: 27px;"></div>-->
                            <div class="wrapper">
                                <div class="swiper-container swiper3">
                                    <div class="swiper-wrapper" id="nohandleImages">
                                    </div>
                                </div>
                                <div id="b3" style="display: none">
                                    <div class="swiper-button-prev p3"></div>
                                    <div class="swiper-button-next n3"></div>
                                </div>

                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item">

                    </div>
                    <div class="layui-form-item">

                    </div>
                    <div class="layui-form-item">

                    </div>
                    <div class="layui-form-item">

                    </div>
                    <div class="layui-form-item">

                    </div>
                </form>
            </div>
        </div>
        <div class="layui-col-xs5" style="padding-top: 30px;">
            <div class="layui-inline" >
                <div style="border-right: 3px solid #3557ff;height: 14px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);margin-top: -5px;"></div>
                <div style="font-size: 16px;color: rgba(14,31,53,0.85);margin-left: 11px;margin-bottom: 12px;">报事进度</div>
            </div>
            <br>
            <div class="grid-demo">
                <ul class="layui-timeline" id="repairSchedule">
                </ul>
            </div>
        </div>
    </div>
</form>
@}